<template>
  <div class="home">
    <!-- <van-nav-bar
      title="扫码填报"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <!-- <van-nav-bar class="blue" title="入连人员自主报备" /> -->
    <img src="../../assets/images/rlzzbb.png" />

    <van-form validate-first ref="formDataRef" @submit="onSubmit">
      <!-- <div block type="info" class="get-area" @click="testNfc" >刷卡读取身份证信息</div> -->
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        input-align="right"
        label="姓名"
        required
        readonly
        v-model="formData.name"
        name="pattern"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <!-- <van-field
        input-align="right"
        label="性别"
        required
        v-model="formData.sex"
        name="pattern"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-field
        input-align="right"
        label="证件类型"
        required
        readonly
        v-model="formData.card_type"
        name="pattern"
        placeholder="请选择证件类型"
        @focus="showCertificate = true"
        :rules="[{ required: true, message: '请选择证件类型' }]"
      />
      <van-field
        input-align="right"
        label="证件号码"
        required
        readonly
        v-model="formData.card_no"
        name="pattern"
        placeholder="请输入证件号码"
        :rules="[
          { required: true, message: '请输入证件号码' },
          {
            pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
            message: '身份证号码格式错误！'
          }
        ]"
        maxlength="18"
      />
      <!-- <van-field
        input-align="right"
        label="出生日期"
        required
        @focus="showDate = true"
        v-model="formData.bithday"
        name="pattern"
        placeholder="请输入出生日期 例:1975/08/21"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->

      <!-- :rules="[{ required: true, message: '请输入正确内容' }]" -->

      <van-field
        input-align="right"
        label="手机号"
        required
        readonly
        v-model="formData.mobile"
        name="phoneRules"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入正确内容' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }
        ]"
      />

      <van-field
        input-align="right"
        v-model="formData.start_addr_list"
        readonly
        required
        name="area"
        label="出发地"
        readonly
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '请选择正确内容' }]"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onAreaConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field
        input-align="right"
        label="详细地址"
        required
        readonly
        v-model="formData.start_addr"
        name="pattern"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />

      <van-field
        input-align="right"
        v-model="formData.estimated_arrival_date"
        required
        readonly
        name="calendar"
        label="来连日期"
        placeholder="来连日期"
        @click="goDlShow = true"
        :rules="[{ required: true, message: '来连日期' }]"
      />
      <van-calendar
        v-model:show="goDlShow"
        @confirm="goYjConfirm"
        :min-date="new Date(2015, 0, 0)"
      />
      <van-field
        input-align="right"
        label="来连方式"
        required
        readonly
        v-model="formData.trave_mode"
        name="pattern"
        placeholder="请选择来连方式"
        @focus="showTrave = true"
        :rules="[{ required: true, message: '请选择来连方式' }]"
      />

      <van-field
        input-align="right"
        :label="range_label"
        v-show="showTwoLabel"
        v-model="formData.range_number"
        name="pattern"
        :placeholder="range_place"
      />
      <van-field
        input-align="right"
        :label="seat_number_label"
        v-show="showTwoLabel"
        v-model="formData.seat_number"
        name="pattern"
        :placeholder="seat_number_place"
      />
      <van-field
        input-align="right"
        :label="carriage_label"
        v-show="showCarriage"
        v-model="formData.carriage"
        :placeholder="carriage_place"
        name="pattern"
      />

      <!-- <van-field
        input-align="right"
        :label="range_label"
        v-show="showTwoLabel"
        readonly
        v-model="formData.range_number"
        name="pattern"
        placeholder="请输入正确信息"
      />
      <van-field
        input-align="right"
        :label="seat_number_label"
        v-show="showTwoLabel"
        readonly
        v-model="formData.seat_number"
        name="pattern"
        placeholder="请输入正确信息"
      />
       <van-field
        input-align="right"
        :label="carriage_label"
        v-show="showCarriage"
        v-model="formData.carriage"
        readonly
        name="pattern"
        placeholder="请输入正确信息"
      /> -->
      <van-calendar
        v-model:show="goDlShow"
        @confirm="goDlConfirm"
        :min-date="new Date(2015, 0, 0)"
      />

      <!-- <van-field
        input-align="right"
        v-model="formData.end_addr_list"
        readonly
        required
        name="area"
        label="目的地"
        placeholder="点击选择省市区"
        @click="showArea2 = true"
        :rules="[{ required: true, message: '请选择正确内容' }]"
      />
      <van-popup v-model:show="showArea2" position="bottom">
        <van-area
          value="210200"
          :area-list="areaList"
          @confirm="enAreaConfirm"
          @cancel="showArea2 = false"
        />
      </van-popup> -->
      <van-field
        input-align="right"
        v-model="formData.end_addr_list"
        readonly
        required
        label="目的地"
        placeholder="请选择目的地"
        @click="trave_mode_show = true"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-popup v-model:show="trave_mode_show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择目的地"
          :options="options"
          @close="trave_mode_show = false"
          @finish="onFinish"
        />
      </van-popup>
      <!-- <van-field
        input-align="right"
        label="所属社区"
        required
        v-model="formData.codename"
        name="pattern"
        placeholder="请选择所属社区"
        @focus="showCode = true"
        :rules="[{ required: true, message: '请选择所属社区' }]"
      /> -->

      <van-field
        input-align="right"
        label="详细地址"
        readonly
        required
        v-model="formData.end_addr"
        name="pattern"
        placeholder="请输入详细居住详细地址"
      />

      <van-field
        input-align="right"
        label="紧急联系人姓名"
        readonly
        v-model="formData.emergency_contact_name"
        name="pattern"
        placeholder="请输入紧急联系人姓名"
      />
      <van-field
        input-align="right"
        label="紧急联系人手机号"
        readonly
        v-model="formData.emergency_contact_mobile"
        name="pattern"
        placeholder="请输入紧急联系人手机号"
      />

      <!-- <van-field
        input-align="right"
        label="户口所在地"
        v-model="formData.registered_residence"
        name="pattern"
        placeholder="请输入户口所在地"
      /> -->
      <van-field input-align="right" name="radio" label="途经重点关注地区">
        <template #input>
          <van-radio-group
            disabled
            v-model="formData.avenue_flow_area"
            direction="horizontal"
          >
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right" name="radio" label="48小时核酸证明">
        <template #input>
          <van-radio-group
            v-model="formData.nucleic_acid"
            direction="horizontal"
            disabled
          >
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right" name="radio" label="健康码状态">
        <template #input>
          <van-radio-group
            v-model="formData.healthy_code_status"
            direction="horizontal"
            disabled
          >
            <van-radio name="0">绿码</van-radio>
            <van-radio name="1">黄码</van-radio>
            <van-radio name="2">红码</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-row>
        <van-col span="24"
          ><p style="font-size: 17px">
            &nbsp;&nbsp;&nbsp;健康码、通信行程卡、48小时内核酸检测报告
          </p></van-col
        >
      </van-row>
      <van-field input-align="right" name="radio" label="">
        <template #input>
          <div :class="postData.length > 2 ? 'upload-img-5' : 'upload-img-1'">
            <div class="posting-uploader">
              <div
                class="posting-uploader-item"
                v-for="(item, nn) in postData"
                :key="nn"
              >
                <img :src="item.content" alt="图片" class="imgPreview" />
                <!-- <van-icon name="close" @click="delImg(nn)" class="delte" /> -->
              </div>
              <!-- <van-uploader
                :after-read="onRead"
                :accept="'image/*'"
                v-show="postData.length <= 2"
              >
              </van-uploader> -->
            </div>
          </div>
        </template>
      </van-field>
      <div style="margin: 16px">
        <p style="font-size: 12px">
          <van-checkbox v-model="checked" shape="square"
            >我已阅知本申报所列事项，并保证以上报备内容正确属实</van-checkbox
          >
        </p>
      </div>
      <div style="margin: 16px; display: flex">
        <!-- <van-button block type="info" native-type="submit">确认</van-button> -->
      </div>
      <div style="margin: 16px"></div>
    </van-form>
    <!-- 省市区弹出 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="title">上车{{ title }}</div>
      <div class="container">
        <div
          class="item"
          v-for="(item, index) in forArea"
          :key="index"
          @click="checkoutArea(item)"
        >
          {{ item.name || item }}
        </div>
      </div>
    </van-popup>
    <!-- 性别类型 -->
    <!-- <van-popup v-model="showSex" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sexColumns"
        @cancel="showSex = false"
        @confirm="onSexConfirm"
      />
    </van-popup> -->

    <!-- 出行交通方式类型 -->
    <van-popup v-model="showTrave" round position="bottom">
      <van-picker
        show-toolbar
        :columns="trave_columns"
        @cancel="showTrave = false"
        @confirm="traveConfirm"
      />
    </van-popup>
    <!-- 证件类型 -->
    <van-popup v-model="showCertificate" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showCertificate = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 社区code -->
    <van-popup v-model="showCode" round position="bottom">
      <van-picker
        show-toolbar
        :columns="showCodeColumns"
        value-key="name"
        @cancel="showCode = false"
        @confirm="onCodeConfirm"
      />
    </van-popup>

    <!-- 日期 -->
    <van-popup v-model="showDate" round position="bottom">
      <van-datetime-picker
        @confirm="getConfirm"
        @cancel="showDate = false"
        :min-date="minDate"
        type="date"
        title="选择年月日"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import area from '@/libs/area.json'
import ssq from '@/libs/ssq.json'
import { helpUserInsert } from '@/api/self/help'
import { destinationByCity, getRecordInfoById } from '@/api/self/record'

import { Toast, Dialog } from 'vant'
export default {
  data() {
    return {
      cascaderValue: '',
      showCarriage: false,
      trave_mode_show: false,
      showTwoLabel: false,
      checked: false,
      goDlShow: false,
      showArea: false,
      showArea2: false,
      areaList,
      minDate: new Date(1900, 0, 1),
      showDate: false, // 选择生日
      seat_number_label: '',
      range_label: '',
      carriage_label: '',
      range_place: '',
      carriage_place: '',
      seat_number_place: '',
      columns: ['身份证', '护照', '军官证', '港澳通行证'],
      showCodeColumns: [],
      trave_columns: ['飞机', '火车', '轮渡', '自驾', '客运'],
      // sexColumns:['男','女'],
      formData: {
        seat_number: '', // 座位号
        carriage: '', // 车厢
        range_number: '', // 班次
        emergency_contact_name: '', // 紧急联系人姓名
        emergency_contact_mobile: '', // 紧急联系人电话
        trave_mode: '', // 出行交通方式（0飞机 1火车 2轮渡  3自驾  4客运
        estimated_arrival_date: '', // 预计抵达日期
        start_addr_list: '', // 出发地省市区
        end_addr_list: '', // 目的地省市区
        card_type: '', // 证件类型
        name: '', // 姓名
        card_no: '', // 身份证
        // sex: '', // 性别
        mobile: '',
        codename: '',
        // bithday: '', // 出生日期
        registered_residence: '', // 户口所在地
        companion_id: '', // 陪同id new
        healthy_code_status: '0', // 健康状态 new
        uploader: [], // 图片list
        start_addr: '', // 始发地  new
        end_addr: '', // 返连目的地
        avenue_flow_area: '0', // 途经重点关注地区
        nucleic_acid: '1', // 持有核酸检测证明
        code: '',
        enter_type: '7', // （7：入连人员自主报备  8：社区自主报备）
        end_addr_district: '',
        end_addr_street: '',
        end_addr_community: ''
      },

      options: ssq,
      forArea: area,
      Province: '', // 省
      city: '', // 市
      area: '', // 区
      title: '省', // 标题省  市  区
      show: false, // 城市选择
      pickerShow: false, // 时间选择
      isGetArea: false, // 是否已经获取上车省市区
      showCertificate: false, // 证件类型
      showCode: false, // 社区code
      showTrave: false, // 出行交通方式类型
      showSex: false, // 性别类型
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      postData: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getRecordInfoById(this.$route.query.id).then(res => {
        if (res.data.errcode === 0) {
          this.checked = true
          this.formData = res.data.data
          this.postData = res.data.data.uploader
          let formdata = JSON.parse(JSON.stringify(this.formData))
          this.formData.avenue_flow_area =
            formdata.avenue_flow_area == true ? '1' : '0'
          ;(this.formData.avenue_flow_area == formdata.avenue_flow_area) == true
            ? '1'
            : '0'
          this.formData.nucleic_acid = formdata.nucleic_acid == true ? '1' : '0'
          this.formData.trave_mode =
            formdata.trave_mode == 0
              ? (this.formData.trave_mode = '飞机')
              : formdata.trave_mode == 1
              ? (this.formData.trave_mode = '火车')
              : formdata.trave_mode == 2
              ? (this.formData.trave_mode = '轮渡')
              : formdata.trave_mode == 3
              ? (this.formData.trave_mode = '自驾')
              : (this.formData.trave_mode = '客运')
          this.traveConfirm(this.formData.trave_mode)
          formdata.card_type == 4
            ? (formdata.card_type = '港澳通行证')
            : this.formData.card_type == 2
            ? (this.formData.card_type = '军官证')
            : this.formData.card_type == 3
            ? (this.formData.card_type = '护照')
            : this.formData.card_type == 5
            ? (this.formData.card_type = '台胞证')
            : (this.formData.card_type = '身份证')
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    onFinish({ selectedOptions }) {
      this.trave_mode_show = false
      this.formData.end_addr_list = selectedOptions
        .map(option => option.text)
        .join('/')

      console.log(selectedOptions[2] == null)
      this.formData.end_addr_district = selectedOptions[0].text
      this.formData.end_addr_street = selectedOptions[1].text
      this.formData.end_addr_community = selectedOptions[2].text
      // this.formData.chargeBarrier =
      //   selectedOptions[2] == null
      //     ? selectedOptions[1].text
      //     : selectedOptions[2].text
    },
    goYjConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.estimated_arrival_date = yy + '-' + mm + '-' + dd
      this.goYjShow = false
    },
    delImg(index) {
      // 删除指定下标的图片对象
      if (isNaN(index) || index >= this.postData.length) {
        return false
      }
      let tmp = []
      for (let i = 0, len = this.postData.length; i < len; i++) {
        if (this.postData[i] !== this.postData[index]) {
          tmp.push(this.postData[i])
        }
      }
      this.postData = tmp
    },
    onRead(file) {
      // 上传图片到图片服务器
      // this.$refs.clothImg.src = file.content
      this.postData.push(file) // postData是一个数组
      // let url = API + '/upload?type=99'
      // let fd = new FormData()
      // fd.append('upImgs', file.file)
      // this.axios.post(url, fd, {headers: {
      //   'Content-Type': 'multipart/form-data'
      // }}).then(res => {
      //   this.imgUrlListValue.push(res.data.urls[0].image) //这里上传到指定的图片服务器，成功后会返回图片的url
      // }).catch(err => {
      //   alert(err)
      // })
    },
    getConfirm(value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.bithday = yy + '-' + mm + '-' + dd
      this.showDate = false
    },
    onAreaConfirm(value) {
      this.showArea = false
      this.formData.start_addr_list = value
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
    },
    enAreaConfirm(value) {
      this.showArea2 = false
      this.formData.end_addr_list = value
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
      let endAdd = { name: this.formData.end_addr_list }
      destinationByCity(endAdd).then(res => {
        if (res.data.errcode === 0) {
          this.showCodeColumns = res.data.data
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    onConfirm(value) {
      this.label = value
      this.formData.card_type = value
      this.showCertificate = false
    },
    onCodeConfirm(value) {
      this.formData.code = value.value
      this.formData.codename = value.name
      this.showCode = false
    },

    traveConfirm(value) {
      // this.label = value
      if (!value) {
        // value = '飞机'
        // this.formData.trave_mode = '飞机'
      }

      this.showTrave = false
      if (value == '飞机') {
        // 飞机
        this.range_label = '航班号'
        this.seat_number_label = '座位号'
        this.range_place = '请输入航班号'
        this.carriage_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '火车') {
        // 火车
        this.range_label = '车次'
        this.seat_number_label = '席位'
        this.carriage_label = '车厢'
        this.range_place = '车次号（例:G3523)'
        this.carriage_place = '席位（例:047号)'
        this.seat_number_place = '车厢（例:01车)'
        this.showTwoLabel = true
        this.showCarriage = true
      } else if (value == '轮渡') {
        // 轮渡
        this.range_label = '船次号'
        this.seat_number_label = '船舱号'
        this.carriage_label = '车厢'
        this.range_place = '请输入船次号'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = true
      } else if (value == '自驾') {
        // 自驾
        this.range_label = '车牌信息'
        this.seat_number_label = '到达收费口'
        this.range_place = '请输入正确信息'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '客运') {
        // 客运
        this.range_label = '车牌号'
        this.seat_number_label = '席位'
        this.range_place = '请输入正确信息'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = false
      }
      this.formData.trave_mode = value
    },
    goDlConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.estimated_arrival_date = yy + '-' + mm + '-' + dd
      this.goDlShow = false
    },
    onSexConfirm(value) {
      this.label = value
      this.formData.sex = value
      this.showSex = false
    },
    testNfc() {
      // 测试用户终端
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {
        Toast.loading({
          message: '正在识别...',
          forbidClick: true,
          duration: 20000
        })
        window.Android.useNFCReadIdCard('123')
      }
      if (isiOS) {
        return Toast.fail('抱歉\n暂不支持ios')
      }
    },
    onSubmit() {
      //   if (this.checked == false) {
      //     Toast.fail('请确认报备内容正确属实')
      //     return
      //   }
      //   this.$refs.formDataRef.validate().then(() => {
      //     let formdata = JSON.parse(JSON.stringify(this.formData))
      //     // formdata.sex = this.formData.sex=='男'?1:0
      //     formdata.trave_mode === '飞机'
      //       ? (formdata.trave_mode = 0)
      //       : formdata.trave_mode === '火车'
      //       ? (formdata.trave_mode = 1)
      //       : formdata.trave_mode === '轮渡'
      //       ? (formdata.trave_mode = 2)
      //       : formdata.trave_mode === '自驾'
      //       ? (formdata.trave_mode = 3)
      //       : (formdata.trave_mode = 4)
      //     formdata.companion_id = this.$route.query.id
      //     formdata.avenue_flow_area =
      //       formdata.avenue_flow_area == '1' ? true : false
      //     formdata.nucleic_acid = formdata.nucleic_acid == '1' ? true : false
      //     formdata.uploader = this.postData
      //     formdata.card_type === '港澳通行证'
      //       ? (formdata.card_type = 4)
      //       : formdata.card_type === '军官证'
      //       ? (formdata.card_type = 2)
      //       : formdata.card_type === '护照'
      //       ? (formdata.card_type = 3)
      //       : (formdata.card_type = 1)
      //     Toast.loading({
      //       message: '加载中...',
      //       forbidClick: true,
      //       duration: 10000,
      //     })
      //     helpUserInsert(formdata).then((res) => {
      //       Toast.clear()
      //       if (res.data.errcode === 0) {
      //         let id =
      //           this.$route.query.id != null
      //             ? this.$route.query.id
      //             : res.data.data.id
      //         this.$router.push({ name: 'recordQrCode', query: { id: id } })
      //         // Dialog.alert({
      //         //   message: '提交成功',
      //         //   showCancelButton: false,
      //         //   showConfirmButton: false,
      //         // }).then(() => {})
      //         // const TIMEOUT = setTimeout(() => {
      //         //   Dialog.close()
      //         //   clearTimeout(TIMEOUT)
      //         // }, 2000)
      //         // 提交成功清空数据
      //         for (let i in this.formData) {
      //           this.formData[i] = ''
      //           this.formData.avenue_flow_area = true
      //         }
      //       } else {
      //         Toast.fail(res.data.msg)
      //       }
      //     })
      //   })
    },
    checkoutArea(item) {
      if (!this.Province) {
        // 选择省
        this.Province = item.name
        this.forArea = item.child
        this.title = '市'
      } else if (!this.city) {
        // 选择市
        this.city = item.name
        this.forArea = item.child
        this.title = '区'
      } else if (!this.area) {
        // 选择区
        this.area = item
        this.show = false
        this.title = '省'
        // 拼接省市区 展示页面
        this.formData.start_station_addr =
          this.Province + '/' + this.city + '/' + this.area

        this.forArea = area
        // 清空省市区 为了下一次选择省市区
        this.Province = ''
        this.city = ''
        this.area = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.upload-img-5 {
  margin: 5px 0 90px 0;
}
.upload-img-1 {
  margin: 5px 0 15px 0;
}

.home {
  background: url('../../assets/images/smtb.jpg') no-repeat;

  img {
    // background: url('../../assets/images/smtb.jpg');
    width: 100%;
  }
  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }
  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label {
    width: 8em;
  }
  /deep/.van-field__error-message {
    text-align: right;
  }
  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item {
      margin: 10px;
    }
  }
}
.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
.home .blue {
  background-color: transparent;
}
.home .van-cell {
  background-color: transparent;
}
</style>
